<template>
  <view class="my-settle-container">
    <!-- 全选 -->
    <label class="radio" @click="changeAllState">
      <radio  :checked="isFullCheck" color="#c00000" /><text>全选</text>
    </label>
    <!-- 合计 -->
    <view class="amount-box">
      合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="btn-settle" @click="settlement">
      结算({{checkedCount}})
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useCart, useUser} from '../../store';
import {storeToRefs} from 'pinia'
const cartStore = useCart()
const {checkedCount,total,checkedGoodsAmount} = storeToRefs(cartStore)
const userStore = useUser()
const {addstr,token} = storeToRefs(userStore)
const isFullCheck = computed(()=>{
  return checkedCount.value === total.value
})
// 全选与全不选
const changeAllState = ()=>{
  cartStore.updateAllGoodsState(!isFullCheck.value)
}
// 去结算
const settlement = ()=>{
  if(!checkedCount.value) return uni.$showMsg('请选择要结算的商品！')
  if(!addstr.value) return uni.$showMsg('请选择收货地址！')
  // if(!token.value) return uni.$showMsg('请先登录')
  if(!token.value){
    delayNavigate()
  }
  payOrder()
}
// 倒计时
const seconds = ref(3)
const showTips = (n)=>{
  uni.showToast({
    title:'请登录后再结算！'+n+'秒后自动跳转到登录页',
    icon:'none',
    mask:true,
    duration:1500
  })
}
// 延迟导航到my页面
const delayNavigate = ()=>{
  showTips(seconds.value)
  const timer = setInterval(()=>{
    seconds.value--
    showTips(seconds.value)
    if(seconds.value <=0) {
      clearInterval(timer)
      seconds.value = 3
      uni.switchTab({
        url:'/pages/my/my',
        success: () => {
          userStore.updateRedirectInfo({
            openType:'switchTap',
            from:"/pages/cart/cart"
          })
        }
      })
      return
    }
  },1000)

}
const payOrder = async()=>{
  // 1.创建订单
  // 1.1组织订单的信息对象
  const orderInfo = {
    // order_price:checkedGoodsAmount,
    order_price:0.01,
    consignee_addr:addstr.value,
    goods:cartStore.cart.filter(x=>x.goods_state).map(item=>{
      return {
        goods_id:item.goods_id,
        goods_number:item.goods_count,
        goods_price:item.goods_price
      }
    })
  }
  // 1.2发起请求创建订单
  const res =  await uni.$http.post('api/public/v1/my/orders/create',orderInfo)
  if(res.data.meta.status !== 200) return uni.$showMsg('创建订单失败')
  // 1.3得到服务器响应的订单编号
  const orderNumber = res.data.message.order_number
  // 订单预支付
  // 2.1发起请求获取订单的支付信息
  const res2 = await uni.$http.post('api/public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
  if(res2.data.meta.status !== 200) return uni.$showMsg('预付订单生成失败！')
  // 得到订单支付相关的必要参数
  const payInfo = res2.data.message.pay
  // 后续无法继续支付，项目到此为止。
  console.log(payInfo);
  if(payInfo){
    uni.showModal({  
        title: '提示',  
        content: '确认要支付吗？',  
        success: function (res) {  
            if (res.confirm) {  
                uni.$showMsg('支付成功！')
                // 执行点击确定后的逻辑  
                // 清空购物车
                cartStore.cart = []
            } else if (res.cancel) {  
                uni.$showMsg('已取消支付') 
                // 执行点击取消后的逻辑  
            }  
        }  
    })
  }
  // 此处为真正支付的一些伪代码
  // 3.发起微信支付
  // 3.1调用uni.requestPayment()发起微信支付
  // const res3 = await uni.requestPayment(payInfo)
  // 3.2未完成支付
  // 3.3完成了支付，进一步查询支付的结果
  // 3.4检测到订单为支付
  // 3.5检测到订单支付完成，可以给个Toast提示
  
}
</script>

<style lang="scss">
.my-settle-container{
  padding-right:5px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  .radio{
    display: flex;
    align-items: center;
  }
  .amount-box{
    .amount{
      color: red;
      font-weight: 700;
    }
  }
  .btn-settle{
    background-color: red;
    height: 50px;
    color: white;
    line-height: 50px;
    padding: 0 10px;
    min-width: 100px;
    text-align: center;
  }
  
}
</style>